<template>
   <div>
      <searchForm @sendQuery="getList" :formData="formData" ref="searchFormRef">
   
      </searchForm>
      <el-icon  size="30"  @click="closeForm">
         <Search />
      </el-icon>
      <el-button type="primary" @click="open()">新增</el-button>
      <el-table :data="menuList"
       row-key="menuId">
         <el-table-column label="菜单名称" prop="menuName" width="180"> </el-table-column>
         <el-table-column label="图标" prop="icon" > </el-table-column>
         <el-table-column label="排序" prop="orderNum" > </el-table-column>
         <el-table-column label="权限标识" prop="isFrame"> </el-table-column>
         <el-table-column label="组件路径" prop="path"> </el-table-column>
         <el-table-column label="状态" prop="name">
            <template #default="{row}">
               <div>
                  {{row.status=='1'?'启用':'禁用'}}
               </div>
            </template>
         </el-table-column>
         <el-table-column label="创建时间" prop="createTime"> </el-table-column>
         <el-table-column label="操作" prop="name">
            <template #default="{row}">
               <div>
                  <el-link type="primary" @click="open(row.menuId,'edit')">修改</el-link>
                  <el-link type="primary" style="margin: 0 15px;" @click="open(row.menuId)">新增</el-link>
                  <el-link type="primary" @click="toDel(row.menuId)">删除</el-link>
               </div>
            </template> 
     
         </el-table-column>
        

      </el-table>
      <!-- 添加菜单 -->
      <addMenu ref="addMenuRef" @updateMenu="getList" :menuList="menuList"></addMenu>
   </div>
</template>
<script setup>
 import useMenu from './hook/menuHook'
 import {listMenu,delMenu} from '@/api/system/menu'
 import {handleTree} from '@/utils/ruoyi'
 import addMenu from './child/addMenu.vue'

 let {formData }=useMenu()
 let menuList=ref([])//菜单数据
 let getList=async (serObj={})=>{
   let res=await listMenu(serObj)
   // console.log(res ,"菜单数据")
   menuList.value=handleTree(res.data,'menuId','parentId');
   console.log(menuList.value ,"菜单数据")
 } 
 getList();
 let searchFormRef=ref(null)
 let closeForm=()=>{
   // 关闭搜索表单
   searchFormRef.value.close();
 }
 let addMenuRef=ref(null)
 let open=(pid,sta)=>{ //控制子组件暴漏的数据
   console.log(pid,"---------------id")
   addMenuRef.value.openAdd(pid,sta)
 }
//  删除菜单接口
 let toDel=async (id)=>{
  
   let res=await delMenu(id)
      ElMessage.success("删除成功")
      getList()

 }

</script>
